import 'package:flutter/material.dart';
import 'package:flutter_flux/flutter_flux.dart';
import 'package:freemusic/model/qq/QQDiss.dart';
import 'package:freemusic/page/songsheet/QQCloudDissSongs.dart';
import 'package:freemusic/services/GedanServices.dart';
import 'package:freemusic/stores/CloudDissStores.dart';
import 'package:freemusic/utils/Util.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:freemusic/model/qq/QQAccount.dart';

class QQCloudSongSheet extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return QQCloudSongSheetState();
  }
}

class QQCloudSongSheetState extends State<QQCloudSongSheet>
    with StoreWatcherMixin<QQCloudSongSheet> {
  CloudDissStore _cloudDissStore;
  WebViewController _controller;
  @override
  void initState() {
    super.initState();
    _cloudDissStore = listenToStore(cloudDissToken);
  }

  void _handleLoginOnPressed() {
    showDialog(
      context: context,
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("登录QQ音乐"),
          backgroundColor: Util.themeColor,
          leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              _controller.evaluateJavascript("document.cookie").then((cookie) {
                GedanServices.getInstace().getQQSongSheet(cookie);
              });
              Navigator.of(context).pop();
            },
          ),
        ),
        body: WebView(
          initialUrl: "https://y.qq.com/n/m/share/profile/index.html",
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController controller) {
            _controller = controller;
          },
        ),
      ),
    );
  }

  Widget _renderTitle() {
    QQAccount account = _cloudDissStore.qqAccount;
    Color themeColor = Util.themeColor;
    if (account == null) {
      return Container(
        child: MaterialButton(
          color: themeColor,
          elevation: 1,
          onPressed: this._handleLoginOnPressed,
          child: Text(
            "登录QQ音乐",
            style: TextStyle(fontSize: 18, color: Colors.white70),
          ),
        ),
      );
    }

    return Container(
      padding: EdgeInsets.only(top: 8, bottom: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(30)),
                child: Image.network(
                  account.headpic,
                  width: 60,
                ),
              ),
              Column(
                children: <Widget>[
                  Text("${account.nick}"),
                  Text("${account.uin}"),
                ],
              )
            ],
          ),
          Container(
            margin: EdgeInsets.only(top: 12),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Column(
                  children: <Widget>[Text("${account.follownum}"), Text("关注")],
                ),
                Column(
                  children: <Widget>[Text("${account.fansnum}"), Text("粉丝")],
                ),
                Column(
                  children: <Widget>[Text("${account.visitornum}"), Text("访客")],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    List<QQDiss> qqDisses = _cloudDissStore.qqDisses;
    return Container(
      padding: EdgeInsets.only(left: 8, right: 8),
      child: Column(
        children: <Widget>[
          _renderTitle(),
          Expanded(
            child: Listener(
              onPointerDown: (e) {
                FocusScope.of(context).unfocus();
              },
              child: ListView.builder(
                itemCount: qqDisses.length,
                itemBuilder: (context, index) {
                  QQDiss qqDiss = qqDisses[index];

                  return _QQDiss(
                    diss: qqDiss,
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _QQDiss extends StatelessWidget {
  final String qq;
  final QQDiss diss;
  final double _size = 50.0;

  const _QQDiss({Key key, this.diss, this.qq}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        GedanServices.getInstace().getQQDissSongs(qq, diss.id);
        Navigator.push(context,
            MaterialPageRoute(builder: (context) => QQCloudDissSongs()));
      },
      child: Container(
        height: 68,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(
                left: 4.0,
                right: 10.0,
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12.0),
                child: diss.picurl == null || diss.picurl.isEmpty
                    ? Image.asset(
                        "images/sheet.png",
                        width: _size,
                      )
                    : FadeInImage.assetNetwork(
                        placeholder: "images/sheet.png",
                        image: diss.picurl,
                        width: _size,
                      ),
              ),
            ),
            Expanded(
              child: Column(
                children: <Widget>[
                  Text(
                    diss.title,
                    style: TextStyle(fontSize: 16),
                  ),
                  Text(
                    diss.subtitle,
                    style: TextStyle(fontSize: 12, color: Util.wordColor),
                  ),
                ],
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
              ),
            ),
            Icon(
              Icons.keyboard_arrow_right,
              color: Util.toolBarColor,
            ),
          ],
        ),
      ),
    );
  }
}
